<template>
    <div class="flex-1 m5">
        <div class="icon-box text-center relative mlauto mrauto" :style="{background}">
            <el-icon size="30" color="#fff" class="absolute t50 l50 icon">
                <component :is="icon"></component>
            </el-icon>
        </div>
        <p class="fs13 fw600 mt5">{{data}}</p>
        <p class="fs12 color-aaa mt5">{{text}}</p>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            required: true
        },
        text: String,
        background: {
            default: '1abc9c'
        },
        icon: {
            type: String,
            default: 'EditPen'
        }
    }
}
</script>

<style scoped>
.icon{
  transform: translate(-50%,-50%);
}
.icon-box{
  width: 80%;
  height: 0;
  padding-top: 80%;
  border-radius: 25px;
}
</style>